<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .alert{
      width: 400px;height:140px;
      box-shadow: 5px 5px 10px 10px #ccc;
      position: fixed;left: 0;right: 0;top: 0;bottom: 0;
      margin: auto;
      padding: 20px;
      display: none;
    }
    .alert .close{float: right;}
  </style>
</head>
<body>
  <div class="alert">
    <h4>这是弹出框</h4>
    <p>hello world</p>
    <input type="button" value="确定" class="close">
  </div>
</body>
<script>

  // 执行alert，弹出信息框
  alert("hello");

  function alert(msg){
    // 选择器
    var alertEle = document.querySelector(".alert");
    var p = alertEle.querySelector("p");
    var close = document.querySelector(".close");
    // 显示
    alertEle.style.display = "block";
    // 设置内容
    p.innerText = msg;
    // 点击按钮
    close.onclick = function(){
      // 关闭
      alertEle.style.display = "none";
    }
  }
  
</script>
</html>